//jquery的核心思想：选择器 选中元素 绑定事件
$(function () {

    //创建音频播放器对象(并包装为jquery对象)
    const player = $('<audio>')
    //服务端歌曲列表接口地址
    const musicListAPI = 'http://home.softeem.xin:8088/music/listAll'
    //初始化歌曲数组
    let musics = []
    //初始化当前播放的歌曲索引
    let currentIndex = 0
    //
    let now = 0
    let total = 0
    let playing = false

    //选中指定类名的元素并绑定点击事件
    $('.btn-list').on('click', function () {
        //显示歌曲列表
        $('#music-list-dialog').fadeIn(1000)
    })

    $('#btn-close').click(function () {
        $('#music-list-dialog').fadeOut(1000)
    })

    //ajax技术（异步请求）
    $.get(musicListAPI, function (data) {
        //将从服务端获取的数组缓存到变量中
        musics = data;
        //循环遍历数组
        $.each(musics, (i, e) => {
            $('#music-list').append(`<li data-index="${i}">${e.name}</li>`)
        })
    })


    //为歌曲列表项绑定点击事件，实现歌曲播放
    //事件委派（委托）
    $('#music-list').on('click', 'li', function () {
        // 高亮
        $(`#music-list>li:eq(${currentIndex})`).removeClass('highlight')
        //获取li元素上的data-index属性
        currentIndex = $(this).data('index')
        //获取需要播放的歌曲对象
        let m = musics[currentIndex]
        //为播放器设置播放源
        player.prop('src', m.path)
        //主动触发play函数
        startPlay(m)
    })
    //封装一个公共函数,实现歌曲播放信息状态同步显示
    function startPlay() {
        playing = true
        // 主动出发play函数
        player.trigger('play');
        // 1.实现唱片旋转
        $('.cover').addClass('playing')
        // 2.在头部显示歌曲名称
        $('.music-name').text(musics[currentIndex].name);
        // 3.播放按钮切换为暂停
        $('.btn-play-pause > i').removeClass('fa-play').addClass('fa-pause')
        // 4.
        $(`li:eq(${currentIndex})`).addClass('highlight');
        // 
        $('.cover-img,.body-bg').prop('src', musics[currentIndex].ablumImg)
    }
    // 播放按钮的转换
    $('.btn-play-pause').on('click', function () {
        if (playing) {
            player.trigger('pause')
            $('.btn-play-pause > i').removeClass('fa-pause').addClass('fa-play')
            $('.cover').removeClass('playing')
            playing = false
        } else {
            startPlay()
        }
    })
    // 监听播放器的媒体第一帧加载事件
    player.on('loadeddata', function () {
        // 获取当前播放器进度
        now = this.currentTime
        // 获取当前播放器表示的播放源的总时长
        total = this.duration
        console.log(now, total)
        // 00：00
        $('.time-total').text(fmtTime(total))
    })
    // 监听播放器的当前时间变化
    player.on('timeupdate', function () {
        // 获取当前播放进度
        now = this.currentTime
        // 
        $('.time-now').text(fmtTime(now))
        // 实时进度显示
        $('.progress').css('width', `${now / total * 100}%`)
        // 3. 歌曲播放完毕之后，自动切歌（参考循环方式）
        // if (now === total) {
        //     changeMusic()
        // }
    })

    function fmtTime(t) {
        // 基于提供的时间构建日期对象
        t = new Date(t * 1000);
        // 
        let m = t.getMinutes();
        // 获取日期对象的分钟值
        let s = t.getSeconds();
        // 将时间格式化为00：00
        m = m < 10 ? '0' + m : m
        s = s < 10 ? '0' + s : s
        return `${m}:${s}`;
    }
    // 为进度条设置点击事件
    $('.progress-touch').on('click', function (e) {
        // 获取当前的点击位置和左侧的偏移值
        let offset = e.offsetX
        // 当前进度跳的总宽度
        let width = $(this).width()

        now = offset / width * total
        player.prop('currentTime', now)
    })
    // 任务
    // 1. 点击按钮实现循环图标切换（0-列表，1-随机，2-单曲）
    
    let loop = 0
    $('.btn-loop').on('click', function () {
        let msg = ' '
        loop = ++loop % 3// 每次点击始终让变量在0-2
        if (loop == 0) {
            $('.btn-loop > i').removeClass('fa-refresh').addClass('fa-list-ol')
            msg = '列表循环'
        }
        else if (loop == 1) {
            $('.btn-loop > i').removeClass('fa-list-ol').addClass('fa-random')
            msg = '随机播放'
        }
        else {
            $('.btn-loop > i').removeClass('fa-random').addClass('fa-refresh')
            msg = '单曲循环'
        }
        $('#tips>span').text(msg).fadeIn(500, function () {
            $(this).fadeOut(1000)
        })


    })
    // 2. 根据循环状态实现上一曲和下一曲切歌 s:prec/next
    function changeMusic(s) {
        $(`#music-list>li:eq(${currentIndex})`).removeClass('highlight')
        switch (loop) {
            case 0:// 列表
                if (s === 'prev') {
                    currentIndex = --currentIndex < 0 ? musics.length - 1 : currentIndex
                } else {
                    currentIndex = ++currentIndex >= musics.length ? 0 : currentIndex
                }
                break;
            case 1://随机  [0.0,1.0] 
                currentIndex = Math.floor(Math.random() * musics.length)
                break;
        }
        player.prop('src', musics[currentIndex].path)
        startPlay()
    }
    $('.btn-next').on('click', function () {
        changeMusic('next')
    })
    $('.btn-prev').on('click', function () {
        changeMusic('prev')
    })
    // 3. 歌曲播放完毕之后，自动切歌（参考循环方式）
    // ended 可以监听  播放到媒体的结束位置，播放停止。
    player.on('ended',changeMusic)
})